<template>
	<view>

		<view class="fullscreen-bg">
			<!-- 在这里放置你的其他内容（会覆盖在背景图上） -->

			<view class="c-wrap my" v-if="userInfo">
				<view style="margin: 13px;">
					<view class="user-top">
						<view style="display: flex;align-items: center;justify-content: center;width:60%;">
							<image src="/static/my/dq.png" mode="aspectFill"
								style="width: 40px;height: 40px;margin: 0 11px;"></image>
							<text
								style="margin-left: 15rpx;display: block;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;width: 70%;">
								{{username}}</text>
						</view>

						<view>
							<view class="hamburger" @click="toggle">
							<view :class="active == 'active' ? 'active':''"></view>
							  <svg viewBox="0 0 32 32">
							    <path class="line line-top-bottom" d="M27 10 13 10C10.8 10 9 8.2 9 6 9 3.5 10.8 2 13 2 15.2 2 17 3.8 17 6L17 26C17 28.2 18.8 30 21 30 23.2 30 25 28.2 25 26 25 23.8 23.2 22 21 22L7 22"></path>
							    <path class="line" d="M7 16 27 16"></path>
							  </svg>
							</view>
							<uni-popup ref="popup" :mask-click="false">
							<view class="content-popup">
								<view class="contens">
									<view class="content-header">
										<view>
											<img src="@/static/home/game.png" alt="">
											<view class="header-name">
												<view>共创社区</view>
												<view>Gc</view>
											</view>
										</view>
										
									</view>

									<view class="tab-lists">
										<view class="tab-list" v-for="(item,index) in tabList2" :key="index" @click="btnList(item)">
											<view>
												<img :src="item.img" width="30" height="30" alt="">
												<text class="tba-name">{{item.text}}</text>
											</view>
											<view><img src="@/static/home/xia.png" alt="" /></view>
										</view>

									</view>
								</view>
								<view class="popupFooter">
									<img src="@/static/home/dt.png" alt=""  @click="toMy"/>
									<img src="@/static/home/gb.png" alt="" />
									<img src="@/static/home/yx.png" alt="" />
								</view>
							</view>
		
								</uni-popup>
						</view>

					</view>
					<!-- 头像信息 -->

					<view class="user-box">
						<view class="u-flex-row u-flex-y-center" style="padding: 0 30rpx;">
							<u-upload @afterRead="afterRead" name="6" :maxCount="1" width="110rpx" height="110rpx"
								style="flex: unset;">
								<image :src="userInfo.avatar" mode="aspectFill"
									style="width: 110rpx;height: 110rpx;border-radius:110rpx"></image>

							</u-upload>

							<view class=" ice-ml-30">
								<view @click="showNickName=true" class="id font-34 u-flex-row"
									style="align-items: center;">
									<span style="margin-right: 5rpx;">{{userInfo.nickname}}</span>
									<image src="/static/my/bj.png" mode="aspectFill"
										style="width: 14px;height: 14px;margin: 0 11px;"></image>
									<!-- <text class="my_type">未定参数</text> -->
								</view>
								<view class="address "
									style="margin-top: 10rpx;font-size: 14px;color: rgba(255, 255, 255,0.6);">ID:
									{{userInfo.username}}
								</view>
							</view>
						</view>

					</view>


					<!-- 余额 -->
					<view
						style="margin-top: 25rpx;background-color: rgba(33, 36, 55,0.7);border-radius: 12rpx;padding: 0 20rpx;">

						<view style="padding : 29px 0 ;display: flex;justify-content: space-between;">
							<view class="YE">
								<text class="ye_num">{{userInfo.money}}</text>
								<text class="ye_title">钱包里面余额</text>
							</view>
							<view class="YE">
								<image src="/static/my/je.png" mode="aspectFill" style="width: 48px;height: 48px;">
								</image>
								<text class="ye_title">账户金额</text>
							</view>
							<view class="YE">
								<text class="ye_num">{{userInfo.total_earn}}</text>
								<text class="ye_title">团队邀请收益</text>
							</view>

						</view>
					</view>
					<!-- 我的钱包 -->
					<view
						style="margin-top: 25rpx;background-color: rgba(33, 36, 55,0.7);border-radius: 12rpx;padding: 0 20rpx;">
						<u-cell @click="goPage('/pages/my/myRecords',)" style="font-size: 155rpx;" title="我的钱包" isLink>
							<text slot="value" class="u-slot-value"
								style="color: rgba(255, 255, 255,0.5);font-size: 30rpx;">历史充值提现记录</text>
						</u-cell>

						<view style="padding-bottom: 19px;">

							<u-row style="height: 50px;" justify="space-between">
								<u-col span="4">
									<view @click="goPage1('/pages/my/myAccount','充值')" class="demo-layout bg-purple-light"
										style="display: flex;justify-content: flex-start;text-align: center;">
										<image src="/static/my/cz.png" mode="aspectFill"
											style="width: 24px;height: 24px;margin-right: 6px;"></image>充值
									</view>
								</u-col>
								<u-col span="4">
									<view @click="goPage1('/pages/my/myAccount','提现')" class="demo-layout bg-purple-light"
										style="display: flex;justify-content: flex-start;text-align: center;">
										<image src="/static/my/zc.png" mode="aspectFill"
											style="width: 24px;height: 24px;margin-right: 6px;"></image>提现
									</view>
								</u-col>

								<u-col span="4" style="text-align: end;">
									<view @click="goPage1('/pages/my/myAccount','转账')" class="my_zz">转账</view>
								</u-col>
							</u-row>
						</view>
					</view>
					<!-- 我的团队邀请详情 -->
					<view
						style="margin-top: 25rpx;background-color: rgba(33, 36, 55,0.7);border-radius: 12rpx;padding: 0 20rpx;">
						<u-cell @click="goPage('/pages/my/invitationDetails')" style="font-size: 155rpx;"
							title="我的团队邀请详情" isLink>
							<text slot="value" class="u-slot-value"
								style="color: rgba(255, 255, 255,0.5);font-size: 30rpx;">邀请详情</text>
						</u-cell>
						<view>
							<u-row style="height: 40px;">
								<u-col span="6">
									<view class="demo-layout bg-purple-light"
										style="display: flex;justify-content: flex-start;text-align: center;">
										<image src="/static/my/yq.png" mode="aspectFill"
											style="width: 24px;height: 24px;margin-right: 6px;"></image>邀请人数
									</view>
								</u-col>
								<u-col span="6">
									<view class="demo-layout bg-purple"
										style="text-align: end;font-size: 14px;color: rgba(255, 255,255, 0.9);">
										{{userInfo.team_count}}</view>
								</u-col>
							</u-row>
							<u-row style="height: 40px;" @click="copy(config?config.dian_bao:'')">
								<u-col span="6">
									<view class="demo-layout bg-purple-light"
										style="display: flex;justify-content: flex-start;text-align: center;">
										<image src="/static/my/jr.png" mode="aspectFill"
											style="width: 24px;height: 24px;margin-right: 6px;"></image>电报链接
									</view>
								</u-col>
								<u-col span="6">
									<view class="demo-layout bg-purple"
										style="text-align: end;font-size: 14px;color: rgba(255, 255,255, 0.9);">
										{{config&&config.dian_bao}}</view>
								</u-col>
							</u-row>
							<u-row style="height: 50px;" @click="copy(share.url)">
								<u-col span="6">
									<view class="demo-layout bg-purple-light"
										style="display: flex;justify-content: flex-start;text-align: center;">
										<image src="/static/my/lj.png" mode="aspectFill"
											style="width: 24px;height: 24px;margin-right: 6px;"></image>推广链接
									</view>
								</u-col>
								<u-col span="6">
									<view class="demo-layout bg-purple"
										style="text-align: end;font-size: 14px;color: rgba(255, 255,255, 0.9);">
										{{share.url}}</view>
								</u-col>
							</u-row>


						</view>

					</view>
				</view>
				<u-modal :show="showNickName" @confirm="saveNickName" title="修改昵称" :closeOnClickOverlay="true"
					@close="showNickName = false">
					<u--input placeholder="请输入昵称" border="bottom" v-model="userInfo.nickname"></u--input>
				</u-modal>
				<ice-tabbar :index="3"></ice-tabbar>
			</view>


			<!-- 底层tabber -->
	<view class="footer-area">
			<view v-for="(item, index) in listDate" :key="index" class="tab-item"
				:class="{ 'active': currentIndex === index+1 }" @click="btnTab(item.pagePath, index)">
			 <button v-if="index==2"  id="payButton" class="btnPostion flex items-center justify-center gap-2 px-5 py-3 rounded-lg btn-gradient text-white font-bold text-base transition-transform duration-200">
			        <i class="fa-brands fa-bitcoin"></i>
			        <span>Pay</span>
			    </button>
				<div v-if="index==2" class="bg-dark text-light min-h-screen flex items-center justify-center">
				    <button id="payButton" class="flex items-center justify-center gap-2 px-5 py-3 rounded-lg btn-gradient text-white font-bold text-base transition-transform duration-200">
				        <i class="fa-brands fa-bitcoin"></i>
				        <span>Pay</span>
				    </button>
					</div>
				<image v-else :src="currentIndex === index+1 ? item.selectedIconPath : item.iconPath" class="tab-icon" />
			</view>
		</view>
	</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				active:"",
				username:"",
				tabList2: [{
					img: require('@/static/home/tab1.png'),
						text: 'Game Fi'
					},
					{
						img: require('@/static/home/tab2.png'),
						text: 'NFT市场'
					},
					{
						img: require('@/static/home/tab3.png'),
						text: 'NFT挖矿'
					},
					{
						img: require('@/static/home/tab4.png'),
						text: 'NFT铸造'
					},
					{
						img: require('@/static/home/tab5.png'),
						text: '个人中心'
					},
					{
						img: require('@/static/home/tab6.png'),
						text: '仪表盘'
					}
				],
				share: {url:null},
				userInfo: null,
				config: null,
				showLink: false,
				showNickName: false,
				currentIndex: 5,
				listDate: [{
						pagePath: "/pages/home/home",
						iconPath: "/static/home/home.png",
						selectedIconPath: "/static/home/homeActive.png",

					},
					{
						pagePath: "/pages/family/family",
						iconPath: "/static/home/family.png",
						selectedIconPath: "/static/home/familyActive.png",
					},
					{pagePath: '/pages/my/myAccount?activeIndex=充值',
						iconPath: "/static/home/add.png",
						selectedIconPath: "/static/home/add.png",
					},
					{
						pagePath: "/pages/ranking/ranking",
						iconPath: "/static/home/ranking.png",
						selectedIconPath: "/static/home/rankingActive.png",
					},
					{
						pagePath: "/pages/my/my",
						iconPath: "/static/home/my.png",
						selectedIconPath: "/static/home/myActive.png",
					},
				]
			}
		},
		computed: {
			lang() {
				return {
					"钱包地址": this.$t("钱包地址"),
					"邀请好友": this.$t("邀请好友"),
					"邀请好友即可获得更多收益": this.$t("邀请好友即可获得更多收益"),
					"服务与工具": this.$t("服务与工具"),
					"资产": this.$t("资产"),
					"新闻中心": this.$t("新闻中心"),
					"订单中心": this.$t("订单中心"),
					"充值记录": this.$t("充值记录"),
					"提现记录": this.$t("提现记录"),
				}
			},
		},
		async onLoad(e) {
			await uni.$ice.checkLogin()
			this.getUserInfo()
			this.getConfig()
			this.getShare()
		},
		methods: {
			toMy(){
			uni.navigateTo({
				url: '/pages/my/my'
			});
			},
			//点击跳转
			btnList(e) {
				if (e.text == 'Game Fi') {
					uni.navigateTo({
						url: '/pages/game/game'
					});
				} else if (e.text == '个人中心') {
					uni.navigateTo({
						url: '/pages/my/my'
					});
				}
				else if(e.text == '仪表盘'){
					uni.navigateTo({
						url: '/pages/home/home'
					});
				}
				else {
					uni.showToast({
						title: '暂未开放',
						duration: 2000
					});
				}
			
			},
			toggle() {
				if(this.active == ''){
					this.$refs.popup.open('top')
					this.active = 'active'
				}else{
					
					this.active = ''
						this.$refs.popup.close()
				}
			},
			//关闭弹框
			btnClose() {
				this.$refs.popup.close()
			},
			// 获取推广链接
			getShare() {
				uni.$ice.post('user/share', {}, false).then(res => {
					this.share = res.data
					uni.stopPullDownRefresh()

				}).catch(err => {

				})
			},

			btnTab(path, index) {

				this.currentIndex = index+!
				uni.navigateTo({
					url: path
				})
			},
			goPage1(url,activeIndex) {
				console.log(	`${url}?activeIndex=${activeIndex}`)
				uni.navigateTo({
					url:`${url}?activeIndex=${activeIndex}`
				})
			},
			goPage(url) {
				uni.navigateTo({
					
					url:url
				})
			},
			copy(str) {
				uni.setClipboardData({
					data: str,
					success: () => {
						uni.showToast({
							title: this.$t('复制成功'),
							icon: 'success'
						})
					}
				});
			},
			getConfig() {
				uni.$ice.post('index/config', {}, false).then(res => {
					this.config = res.data
				}).catch(err => {

				})
			},
			saveNickName() {
				uni.$ice.post('user/saveNickname', {
					nickname: this.userInfo.nickname
				}, true).then(res => {
					// this.getUserInfo()
					uni.showToast({
						title: this.$t(res.msg),
						icon: 'none'
					})
					this.showNickName = false;
				}).catch(err => {

				})
			},
			getUserInfo() {
				let tmp = uni.getStorageSync('userInfo')
				this.username=''
				if (tmp) {
					this.userInfo = JSON.parse(tmp)
					const username=this.userInfo.username
					this.username=  `${username.slice(0, 4)}...${username.slice(-6)}`;
					console.log(this.username)
					return 
				}
				uni.$ice.post('user/index', {}, false).then(res => {
					uni.setStorageSync('userInfo', JSON.stringify(res.data));
					this.userInfo = res.data
					const username=this.userInfo.username
					this.username=  `${username.slice(0, 4)}...${username.slice(-6)}`;
					if (this.userInfo.username != uni.$ice.walletAddress) {
						uni.removeStorageSync("token")
						location.reload();
					}
					uni.stopPullDownRefresh()

				}).catch(err => {

				})
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				console.log(event.file)
				let token = uni.getStorageSync("token")
				uni.$u.http.upload('/user/uploadAvatar', {
					filePath: event.file.url, // 要上传文件资源的路径。
					name: 'avatar',
					params: {},
					header: {
						TOKEN: token
					},
					formData: {}, // HTTP 请求中其他额外的 form data
					// 返回当前请求的task, options。请勿在此处修改options。非必填
					getTask: (task, options) => {},
				}).then(res => {
					console.log(res)
					if (res.data.code == 1) {
						uni.removeStorageSync("userInfo")
						this.getUserInfo()
					}
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
					// 返回的res.data 已经进行JSON.parse
				}).catch(err => {
					console.log(err)
				})
			},
		}



	}
</script>

<style scoped>
	.tba-name{
	   position: relative;
	   font-size: 27px;
	   left: 12px;
	   top: -5px;
		  
	}
	.tab-list{
		width: 100%;
		height: 80rpx;
		
		margin-top: 24rpx;
		display: flex;
		justify-content: space-between;
	}
	.tab-lists{
		margin-top:200rpx;
	}
	.header-name{
		display: inline-block;
		margin-left:18rpx;
		font-size: 24rpx;
	}
	.content-header{
		    display: flex;
		    padding-top: 46rpx;
		    justify-content: space-between;
	}
	.contens{
		width: 87%;
		margin: 0 auto;
	}
	.content-popup{
		width: 100%;
		height: 100vh;
		background-color: rgba(17, 21, 39, 0.8);
	}
	/* 若在scoped样式中，使用深度选择器 */
	::v-deep .u-cell__title-text {
		font-size: 20px !important;
	}

	.tab-item:nth-child(3) .tab-icon {
		/* 选中第三个 Tab（中间的 add 图标） */
		width: 80px !important;
		/* 放大宽度 */
		height: 80px !important;
		/* 放大高度 */
		position: relative;
		top: -84rpx;
	}

	.footer-area {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 62px;
		/* line-height: 86px; */
		z-index: 9 !important;
		padding-top: 26px;
		display: flex;
		background-color: #212437;
		color: red;
		justify-content: space-around;
		padding-left: 16px;
		padding-right: 16px
	}

	.fullscreen-bg {
		position: fixed;
		/* 关键：固定定位 */
		top: 0;
		left: 0;
		width: 100vw;
		/* 100%视窗宽度 */
		height: 100vh;
		/* 100%视窗高度 */
		background-image: url('@/static/banner.png');
		/* 替换为你的图片路径 */
		background-size: cover;
		/* 图片拉伸填满容器 */
		background-position: center;
		/* 图片居中 */
		background-repeat: no-repeat;
		/* 禁止重复 */
	}

	.title {
		color: white;
		font-size: 24px;
		position: relative;
		/* 需要设置定位（relative/absolute） */
		z-index: 1;
		/* 确保文字在背景图上方 */
	}

	.tab-icon {
		width: 30px;
		height: 30px;
	}

	page {
		background-color: transparent;
	}

	.user-box {
		/* background: linear-gradient(119deg, #258CE9, #DA2B45); */
		padding-top: 30rpx;
		/* border-radius: 12rpx; */
		overflow: hidden;
	}

	.my .title {
		box-sizing: border-box;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		padding-bottom: 40rpx
	}

	.my .title .left {
		display: flex;
		flex-wrap: nowrap
	}



	.my .title .left .id {
		color: #fff
	}

	.my .address {
		width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.my .title .right {
		padding-top: 16rpx
	}

	.my .list {

		box-sizing: border-box;
		height: 190rpx;
		background: #000031;
		border: 1px solid #9125ff;
		border-radius: 64rpx;
		margin: 0 auto;
		padding: 42rpx 80rpx 32rpx 80rpx;
		display: flex;
		justify-content: space-between;
		color: #8f25ff;
		text-align: center;
		margin-bottom: 19px
	}

	.my .invite {

		box-sizing: border-box;
		background: #000031;
		border: 1px solid #9125ff;
		border-radius: 32rpx;
		margin-top: 40rpx;
		display: flex;
		padding-left: 72rpx;
		padding-right: 62rpx;
		justify-content: space-between;
		margin-bottom: 34rpx;
		align-items: end;
	}

	.my .invite .text {
		padding-top: 64rpx
	}

	.my .invite .text .up {
		padding-bottom: 18rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #fff
	}

	.my .invite .text .down {
		padding-bottom: 46rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #a5a5a5
	}

	.my .invite .img {
		padding-top: 28rpx;
		width: 182rpx;
	}

	.my .setting {

		box-sizing: border-box;
		background: #080647;
		border: 1px solid #9125ff;
		border-radius: 32rpx;
		margin: 0 auto;
		padding: 44rpx 30rpx 30rpx 40rpx
	}

	.my .setting .setting-title {
		font-size: 32rpx;
		color: #fff;
		font-weight: 400;
		padding-bottom: 32rpx
	}

	.my .setting .setting-list {
		display: flex;
		justify-content: space-between;

		margin-bottom: 60rpx
	}

	.my .setting .setting-list .left {
		display: flex;
		flex-wrap: nowrap;
		color: #fff;
		flex: 1;
		font-size: 28rpx
	}

	.my .setting .img {
		margin-right: 20rpx;
		width: 40rpx;
	}

	/* .my .setting .setting-list .left img {
		margin-right: 20rpx
	} */

	.my .setting .setting-list .right {
		color: #fff
	}

	.my_zz {
		width: 60px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		border-radius: 50px;
		box-shadow: 0px 0px 50px 0px rgba(27, 88, 249, 0.5);
		background: linear-gradient(180.00deg, rgb(27, 88, 249) 19.847%, rgb(89, 133, 248) 82.443%);
		color: rgb(33, 36, 55);
		font-family: 阿里巴巴普惠体 2.0;
		font-size: 18px;
		font-weight: 400;
		letter-spacing: -0.3px;
	}

	.YE {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 33%;
	}

	.ye_num {
		color: rgb(255, 255, 255);
		font-family: 阿里巴巴普惠体 2.0;
		font-size: 36px;
		font-weight: 700;
		line-height: 50px;
		letter-spacing: -0.3px;
		text-align: left;
	}

	.ye_title {
		color: rgba(255, 255, 255, 0.6);
		font-family: 阿里巴巴普惠体 2.0;
		font-size: 14px;
		font-weight: 400;
		line-height: 20px;
		letter-spacing: -0.3px;
		text-align: left;
	}

	.my_type {
		height: 30px;
		padding: 0 8px;
		border-radius: 3px;
		box-shadow: 0px 0px 50px 0px rgba(27, 88, 249, 0.5);
		background: linear-gradient(180.00deg, rgb(27, 88, 249) 19.847%, rgb(89, 133, 248) 82.443%);
		color: rgb(255, 255, 255);
		font-family: 阿里巴巴普惠体 2.0;
		font-size: 14px;
		font-weight: 400;
		line-height: 30px;
		letter-spacing: -0.3px;
		text-align: left;
	}

	.user-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.user-top text {
		color: rgb(255, 255, 255);
		font-family: 阿里巴巴普惠体 2.0;
		font-size: 20px;
		font-weight: 700;
		line-height: 28px;

	}

	.line {
	  fill: none;
	  stroke: white;
	  stroke-linecap: round;
	  stroke-linejoin: round;
	  stroke-width: 3;
	  /* Define the transition for transforming the Stroke */
	  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
	              stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	.line-top-bottom {
	  stroke-dasharray: 12 63;
	}
	
	.hamburger {
	  cursor: pointer;
	  position: relative;
	  z-index: 99999;
	}
	.hamburger view.active + svg {
	  transform: rotate(-45deg);
	}
	.hamburger view {
	  display: none;
	}
	
	.hamburger svg {
	  /* The size of the SVG defines the overall size */
	  height: 3em;
	  /* Define the transition for transforming the SVG */
	  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	.hamburger view.active + svg .line-top-bottom {
	  stroke-dasharray: 20 300;
	  stroke-dashoffset: -32.42;
	}
</style>